<template>
	<div id="news">
		<p class="Title" v-text="newsType == 1?'系统消息':'平台公告'"></p>
		<div v-show="isshow == 1" class="news_list">
			<div class="list_title">
				<p>标题内容</p>
				<p>时间</p>
			</div>
			<div v-show="newsType == 1" v-if="messageList.length>0" v-for="(item,key) in messageList" @click="toDetail(key)" class="list_item">
				<p>{{item.title}}<span v-show="item.isRead == 0"></span></p>
				<p>{{getDate(item.createtime)}}</p>
			</div>
			<div v-show="newsType == 2"  v-if="noticeList.length>0" v-for="(item,key) in noticeList" @click="toNotice(key)" class="list_item">
				<p>{{item.noticeTitle}}</p>
				<p>{{getDate(item.createtime)}}</p>
			</div>
			<el-pagination 
				v-if="messageList.length>0 && newsType==1"
				background
			    @current-change="handleCurrentChange"
			    :current-page.sync="currentPage"
			    :page-size="pageSize"
			    :pager-count="5"
			    layout="prev, pager, next, jumper"
			    :total="total">
			</el-pagination>
			<el-pagination 
				v-else-if="noticeList.length>0 && newsType==2"
				background
			    @current-change="handleCurrentChange"
			    :current-page.sync="currentPage"
			    :page-size="pageSize"
			    :pager-count="5"
			    layout="prev, pager, next, jumper"
			    :total="total">
			</el-pagination>
			<!----------没有数据了------------>
			<div v-else class="noData">
				<img src="../../static/img/nodata.png"/>
			</div>
			<!--------一键已读------------->
			<input v-if="noticeList.length>0" @click="beRead" type="button" id="beRead" value="一键已读" />
		</div>
		<div v-if="messageList.length>0" v-show="isshow == 2 && newsType==1" class="newContent">
			<input @click="update" type="button" class="return" value="返回列表" />
			<p class="new_title">{{messageList[index].title}}</p>
			<p class="new_time">{{getDate(messageList[index].createtime)}}</p>
			<p class="new_content">{{messageList[index].content}}</p>
		</div>
		<div v-if="noticeList.length>0" v-show="isshow == 2 && newsType==2" class="newContent">
			<input @click="update" type="button" class="return" value="返回列表" />
			<p class="new_title">{{noticeList[index2].noticeTitle}}</p>
			<p class="new_time">{{getDate(noticeList[index2].createtime)}}</p>
			<p class="new_content">{{noticeList[index2].content}}</p>
		</div>
	</div>
</template>

<script>
export default{
	name: 'news',
	data:function(){
		return{
			newsType: 1,//消息类型
			isshow: 1,//1 列表   2 详情
			total: 0,//总条数
			pageSize: 13,//每页条数
			currentPage: 1,//当前页码
			index: 0,//消息序号
			indexKey:'',//首页传回来的key
			messageList:[//系统消息列表
			],
			index2: 0,//消息序号
			indexKey2:'',//首页传回来的key
			noticeList:[
			],
		}
	},
	methods:{
		message: function(){
			var _this = this;
			let postData = this.$qs.stringify({
	        	startPage: _this.currentPage,
	        	pageSize: _this.pageSize
	        })
			_this.$axios.post('/agent/message/show', postData).then(function(res){
			    var data = res.data;
			    console.log(data);
			    if(data.message=="succ"){
			    	_this.messageList = data.result.list;
			    	_this.total = data.result.total;
			    }else{
			    	_this.$alert('2',data.result);
			    }
			}).catch(function (error) {
			    console.log(error);
			});
		},
		update: function(){
			this.isshow = 1;
			if(this.newsType==1){
				this.message();
			}else{
				this.showNotice();
			}
			
		},
		showNotice: function(){
			var _this = this;
			let postData = this.$qs.stringify({
	        	startPage: _this.currentPage,
	        	pageSize: _this.pageSize
	        })
			_this.$axios.post('/agent/notice/showNotice',postData).then(function(res){
			    var data = res.data;
		    	console.log(data);
		    	if(data.message=="succ"){
		    		_this.total = data.result.total;
		    		_this.noticeList = data.result.list;
		    	}else{
		    		_this.$alert('2',data.result);
		    	}
			}).catch(function (error) {
			    console.log(error);
			});
		},
		//--------查看消息详情---------
		toDetail:function(key){
			var _this = this;
			_this.index = key;
			_this.isshow = 2;
			if(_this.messageList[key].isRead==0){
				var postData = this.$qs.stringify({
		        	id:_this.messageList[key].id
		        })
				_this.$axios.post('/agent/message/updateMessage',postData).then(function(res){
					var data = res.data;
					console.log(data)
					if(data.message=="succ"){
						_this.$parent.unRead();
					}else{
						_this.$alert('2',data.result);
					}
				}).catch(function (error) {
				    console.log(error);
				});
			}
		},
		//--------查看公告详情---------
		toNotice:function(key){
			var _this = this;
			_this.index2 = key;
			_this.isshow = 2;
		},
		//-------一键已读--------
		beRead:function(){
			var _this = this;
			$.each(this.messageList, function(i) {
			_this.messageList[i].isRead = 1;
			});
			_this.$axios.post('/agent/message/readAll').then((res) => {
				var data = res.data;
			});
		},
		//-----------分页页码改变------------
	    handleCurrentChange:function(val) {
	        this.currentPage = val
	        if(this.newsType==1){
	        	this.message();
	        }else{
	        	this.showNotice();
	        }
	    },
		//--------日期转换-----------
		getDate: function(str){  
			if(str == ""||str ==null){
				return "";
			}
		    var oDate = new Date(str),  
		    oYear = oDate.getFullYear(),  
		    oMonth = oDate.getMonth()+1,  
		    oDay = oDate.getDate(),  
		    oHour = oDate.getHours(),  
		    oMin = oDate.getMinutes(),  
		    oSen = oDate.getSeconds(),  
		    oTime = oYear +'-'+ this.getzf(oMonth) +'-'+ this.getzf(oDay) +' '+ this.getzf(oHour) +':'+ this.getzf(oMin) +':'+this.getzf(oSen);//最后拼接时间  
		    return oTime;  
		},
		//补0操作  
		getzf:function(num){  
		    if(parseInt(num) < 10){  
		        num = '0'+num;  
		    }  
		    return num;  
		}
	},
	created:function(){
		if(this.$route.query.id){
			this.newsType = this.$route.query.id;
			if(this.newsType==2){
				this.showNotice();
				this.indexKey2 = this.$route.query.indexKey2;
				this.toNotice(this.indexKey2);
			}else{
				this.message();
				if(this.$route.query.indexKey || this.$route.query.indexKey == '0'){
					this.indexKey = this.$route.query.indexKey;
					this.toDetail(this.indexKey);
				}
			}
		}
	},
	watch:{
		'$route'(){
			this.newsType = this.$route.query.id;
			if(this.newsType==2){
				this.showNotice();
			}else{
				this.message();
			}
		},
	}
}
</script>

<style>
/*-----------分页器样式------------*/
.el-pagination{
	text-align: center;
	margin-top: 20px;
}
.el-pagination.is-background .el-pager li:not(.disabled).active{
	background-color: #FF464E;
}
.el-pagination.is-background .el-pager li:not(.active):hover{
	color: #FF464E;
}
</style>

<style scoped>
#news{
	width: 1030px;
	background-color: #fff;
	padding: 30px;
	padding-bottom: 10px;
	box-sizing: border-box;
}
.Title{
	font-size: 20px;
	color: #545454;
}
.news_list{
	margin-top: 20px;
	position: relative;
}
.list_title{
	background-color: #F5F5F5;
	height: 30px;
	display: flex;
	align-items: center;
}
.list_title p{
	color: #545454;
	text-align: center;
}
.list_title p:first-child{
	width: 60%;
}
.list_title p:last-child{
	width: 40%;
}
.list_item{
	display: flex;
	align-items: center;
	border-bottom: 1px solid #E6E6E6;
	height: 35px;
	color: #808080;
	cursor: pointer;
}
.list_item p{
	text-align: center;
}
.list_item p span{
	width: 10px;
	height: 10px;
	background-color: #FF464E;
	border-radius: 50%;
	display: inline-block;
	margin-left: 10px;
}
.list_item p:first-child{
	width: 60%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.list_item p:last-child{
	width: 40%;
}
/*-----------消息详情-------------*/
.newContent{
	margin-top: 20px;
}
.return{
	width: 100px;
	height: 25px;
	background-color: #fff;
	border: 1px solid #FF464E;
	color: #FF464E;
	box-sizing: border-box;
	cursor: pointer;
}
.new_title{
	font-size: 18px;
	font-weight: 600;
	color: #545454;
	text-align: center;
	padding-top: 30px;
	border-top: 1px solid #E6E6E6;
	margin-top: 10px;
}
.new_time{
	color: #808080;
	text-align: center;
	margin-top: 10px;
}
.new_content{
	width: 600px;
	margin: 0 auto;
	margin-top: 30px;
	color: #808080;
}
/*-------没数据了----------*/
.noData img{
	width: 30%;
	display: block;
	margin: 0 auto;
	margin-top: 50px;
}
/*------一键已读---------*/
#beRead{
	position: absolute;
	bottom: 0;
	right: 20px;
	border: 1px solid #FF464E;
	background-color: #fff;
	color: #FF464E;
	width: 120px;
	height: 30px;
}
</style>
